<template>
  <div class="eigen-value">
    <div class="scheme-box">
      <el-table
        highlight-current-row
        border
        :header-cell-style="{ border: 'solid 0.5px #d2d3da' }"
        stripe
        fit
        ref="table"
        align="left"
        :data="state.tableData"
        v-loading="dataListLoading"
        :cell-class-name="cellClassName"
        @selection-change="selectionChange"
      >
        <el-table-column prop="leftTitle" label="模型" show-overflow-tooltip align="center">
          <template #default="{ row }">{{ row[0] }}</template>
        </el-table-column>
        <el-table-column prop="scName" label="入流洪峰" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchFengData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="scName" label="入流洪量" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchLiangData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
        <!-- <el-table-column prop="scName" label="水位" show-overflow-tooltip align="center">
            <el-table-column
              v-for="(item, index) in state.schemeArr"
              :label="item.scName"
              :key="index"
              :min-width="item.width"
              :show-overflow-tooltip="true"
              align="center"
            >
              <template #default="{  }">{{ 1 }}</template>
            </el-table-column>
          </el-table-column>-->
        <el-table-column prop="scName" label="入流洪现时间" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchTimeData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="scName" label="最大水位" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchWaterData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="scName" label="最大出流" show-overflow-tooltip align="center">
          <el-table-column
            v-for="(item, index) in state.schemeArr"
            :label="item.scName"
            :key="index"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">{{ switchOutData(scope.$index, item) }}</template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose, watch } from 'vue'
import { addArea, getAreaSecList } from '@/services/modules/compute-methods'
const props = defineProps({
  servers: {
    type: Array,
    default: []
  }
})
onMounted(() => {})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
const state = reactive({
  schemeArr: [],
  originTitle: ['模拟'],

  eigResultArr: [],
  tableData: ['']
})
watch(
  () => props.servers,
  () => {
    state.eigResultArr = props.servers
    let arr = []
    state.eigResultArr.forEach((item) => {
      arr.push({ ...item, scName: item.scName })
    })
    state.schemeArr = arr
    state.schemeArr = state.schemeArr.map((item) => {
      return {
        ...item,
        hongfeng: {
          fcMxq: item.fcMxq,
          rlMxq: item.rlMxq,
          erMxq: item.erMxq,
          alerMxt: item.alerMxt
        },
        hongliang: { fcV: item.fcV, rlV: item.rlV, erV: item.erV, alerMxt: item.alerMxt },
        time: { fcMxt: item.fcMxt, rlMxt: item.rlMxt, erMxt: item.erMxt, alerMxt: item.alerMxt },
        water: { fcMxz: item.fcMxz },
        outFlow: { fcMxOtq: item.fcMxOtq }
      }
    })
    console.log(state.schemeArr, 'arr')
    let matrixData = state.schemeArr.map((row) => {
      let arr = []
      for (let key in row) {
        arr.push(row[key])
      }
      return arr
    })
    // 加入标题拼接最终的数据
    state.tableData = matrixData.map((col, i) => {
      return [state.originTitle[i], ...matrixData]
    })
    state.tableData = state.tableData.slice(0, 1)
  },
  {
    deep: true
  }
)
//洪峰数据转换
function switchFengData(index, item) {
  switch (index) {
    case 0:
      return item.hongfeng.fcMxq
    case 1:
      return item.hongfeng.rlMxq
    case 2:
      return item.hongfeng.erMxq
    case 3:
      return '--'
    default:
      ''
      break
  }
}
//洪量数据转换
function switchLiangData(index, item) {
  switch (index) {
    case 0:
      return item.hongliang.fcV
    case 1:
      return item.hongliang.rlV
    case 2:
      return item.hongliang.erV
    case 3:
      return '--'
    default:
      ''
      break
  }
}
//时间数据转换
function switchTimeData(index, item) {
  switch (index) {
    case 0:
      return item.time.fcMxt
    case 1:
      return item.time.rlMxt
    case 2:
      return item.time.erMxt
    case 3:
      return item.time.alerMxt
    default:
      ''
      break
  }
}
//水位
function switchWaterData(index, item) {
  switch (index) {
    case 0:
      return item.water.fcMxz

    default:
      ''
      break
  }
}
//出流
function switchOutData(index, item) {
  switch (index) {
    case 0:
      return item.outFlow.fcMxOtq
    default:
      ''
      break
  }
}

//保存区域
function handleSave() {}
// defineExpose({ handleOpenModal })
function handleClose() {
  dialogVisible.value = false
}
</script>

<style lang="less">
.eigen-value {
  .scheme-box {
    :deep(.el-table) {
      border: none;
      .el-table__row {
        border: 1px solid red;
      }
      th {
        background-color: #f5f4f4;
        height: 44px;
      }

      td.el-table__cell {
        height: 58px;
      }

      .el-table__body tr:hover > td {
        background: #fff !important;
      }

      .el-table__body tr:hover > td:nth-child(1) {
        background: #f5f4f4 !important;
      }

      td.el-table__cell,
      th.el-table__cell.is-leaf {
        // border-right: 1px solid #ebeef5 !important;
        // border-bottom: 1px solid #ebeef5 !important;
      }

      td.el-table__cell:nth-child(1) {
        background: #f5f4f4;

        .cell {
          text-align: center;
        }
      }

      td.el-table__cell:last-child,
      th.el-table__cell.is-leaf:last-child {
        border-right: none !important;
      }
    }
  }
}
</style>
